<style scoped>
  .basic-table-foot{
    margin-bottom: 10px;
    margin-top: 10px;
  }
</style>
<template>
  <div class="basic-table">
    <div class="basic-table-main">
        <Table border ref="selection" :columns="tableColums" :data="tableData"></Table>
    </div>
    <div class="basic-table-foot">
      <Page @on-change="changeTablePage" @on-page-size-change="changePageSize" :current="currentTablePage" :page-size="pageSize" :total="totalPage" size="small" show-total show-elevator show-sizer></Page>
      <Button @click="handleSelectAll(true)">Set all selected</Button>
      <Button @click="handleSelectAll(false)">Cancel all selected</Button>
  </div>
  </div>
</template>
<script>
    export default {
        props: ['tableData','tableColums','totalPage'],
        data () {
            return {
                currentTablePage:1,
                pageSize:10
            }
        },
        watch:{
          currentTablePage(val){
            this.$emit('tablepage',{page:val,pagesize:this.pageSize});
          },
          pageSize(val){
            this.$emit('tablepage',{page:this.currentTablePage,pagesize:val});
          }
        },
        methods: {
          handleSelectAll (status) {
              this.$refs.selection.selectAll(status);
          },
          changeTablePage:function(page){
            this.currentTablePage = page;
          },
          changePageSize:function(size){
            this.pageSize = size;
          }
        }
    }
</script>
